﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="search.aspx.cs" Inherits="search" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript">
        var map;
        var markers = [];
        var currentInfoWindow;

        $(document).ready(init);

        //網頁上所有的DOM都載入後
        function init() {
            detectBrowser();
            addMarker();
            fillSearchQuery();
        }

        function detectBrowser() {
            var mapdiv = $("#div_spotMap");
            mapdiv.height(document.body.clientHeight);
            mapdiv.width(document.body.clientWidth);
        }

        function fillSearchQuery() {
            $("#qTopAddr").val($('#ctl00_ContentPlaceHolder2_hdnCaseKeyWord').val());
            $("#qTopCityId option").each(function () {
                if ($(this).text() == $('#ctl00_ContentPlaceHolder2_hdnCity').val()) {
                    $(this).attr('selected', 'selected');
                    $("#qTopCityId").change();
                }
            });
            $("#qTopZipId option").each(function () {
                if ($(this).text() == $('#ctl00_ContentPlaceHolder2_hdnArea').val()) {
                    $(this).attr('selected', 'selected');
                }
            });
            $("#qTopAddr2").val($('#ctl00_ContentPlaceHolder2_hdnRoad').val());
            $("#qPriceMin").val($('#ctl00_ContentPlaceHolder2_hdnPriceMin').val());
            $("#qPriceMax").val($('#ctl00_ContentPlaceHolder2_hdnPriceMax').val());
            $("#qStartPriceMin").val($('#ctl00_ContentPlaceHolder2_hdnStartPriceMin').val());
            $("#qStartPriceMax").val($('#ctl00_ContentPlaceHolder2_hdnStartPriceMax').val());
        }

        //加入標記點
        function addMarker() {
            $.ajax(
            {
                url: 'handler/getSpot.ashx',
                type: 'post',
                async: false,
                data: {
                    road: $('#ctl00_ContentPlaceHolder2_hdnRoad').val(),
                    area: $('#ctl00_ContentPlaceHolder2_hdnArea').val(),
                    city: $('#ctl00_ContentPlaceHolder2_hdnCity').val(),
                    caseKeyWord: $('#ctl00_ContentPlaceHolder2_hdnCaseKeyWord').val(),
                    priceMin: $('#ctl00_ContentPlaceHolder2_hdnPriceMin').val(),
                    priceMax: $('#ctl00_ContentPlaceHolder2_hdnPriceMax').val(),
                    startPriceMin: $('#ctl00_ContentPlaceHolder2_hdnStartPriceMin').val(),
                    startPriceMax: $('#ctl00_ContentPlaceHolder2_hdnStartPriceMax').val()
                },
                dataType: 'json',
                success: function (data) {
                    var first = true;
                    for (var index in data) {

                        if (first == true) {//第一次執行迴圈
                            /*以哪個緯經度中心來產生地圖*/
                            var latlng = new google.maps.LatLng(data[index].Lat, data[index].Lng);
                            var myOptions = {
                                zoom: 12,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };
                            /*產生地圖*/
                            map = new google.maps.Map($("#div_spotMap")[0], myOptions);

                            first = false;
                        } //End if (first == true) 

                        if (data[index].Title != null) {
                            //建立緯經度座標
                            var myLatlng = new google.maps.LatLng(data[index].Lat, data[index].Lng);
                            //加一個Marker到map中
                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: data[index].Title,
                                icon: "images/btn/map_dover.png"
                            });

                            //設定 各標記點Marker的click事件  
                            addInfoWindow(marker, data[index]);

                            markers.push(marker);

                            //設定 左方資料列表與其資料列click事件 http://elaine-iic.blogspot.tw/2013/03/google-maps-infowindow-markerclusterer.html
                            //onclickJs = "ShowInfo(map , marker[" + index + "] )";
                            //DataHtml += "<li><span onclick="\" onclickjs="" style="cursor: pointer;">" + MarkAry[index][0] + "</span></li>";  

                        }

                    } //End for (var index in data) 
                    var markerCluster = new MarkerClusterer(map, markers);
                }     //End success: function (data) 
            });       //End jQuery Ajax
        }             //End function addMarker() 

        function addInfoWindow(marker, caseObj) {
            var info = InfoContent(caseObj);
            var infoWindow = new google.maps.InfoWindow({
                content: info
            });
            google.maps.event.addListener(marker, 'click', function () {
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }
                currentInfoWindow = infoWindow;
                infoWindow.open(map, marker);
                //map.setCenter(marker.getPosition());
                //map.setZoom(15);
            });
        }

        function InfoContent(caseObj) {
            //設定資訊視窗內容要呈現什麼 
            html = "<div class='imgbox'><img src='upload/" + caseObj.PicFileName + "' width='98' height='74' /></div>";
            html += "<div class='textbox'><div>店家名稱：<span style='color: black;'>" + caseObj.CustomField3 + "</span></div>";
            html += "<div>專案名稱：<a href='case_in.aspx?id=" + caseObj.PostId + "' target='_blank'><span style='color: blue;'>" + caseObj.Title + "</span></a></div>";
            html += "<div>地址：<span style='color: black;'>" + caseObj.Address + "</span></div>";
            html += "<div>看板數：<span style='color: black;'>" + caseObj.CustomField2 + "</span></div></div>";
            return html;
        }
    </script>
    <style type="text/css">
        .textbox
        {
            font-size: 14px;
            font-family: 微軟正黑體;
            line-height: 22px;
            float: left;
            /*display: block;
            margin-left: 185px;*/
        }
        .imgbox
        {
            width: 110px;
            float: left;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <div id="div_spotMap"></div>
    <asp:HiddenField ID="hdnCity" runat="server" />
    <asp:HiddenField ID="hdnArea" runat="server" />
    <asp:HiddenField ID="hdnRoad" runat="server" />
    <asp:HiddenField ID="hdnPriceMin" runat="server" />
    <asp:HiddenField ID="hdnPriceMax" runat="server" />
    <asp:HiddenField ID="hdnStartPriceMin" runat="server" />
    <asp:HiddenField ID="hdnStartPriceMax" runat="server" />
    <asp:HiddenField ID="hdnCaseKeyWord" runat="server" />    
</asp:Content>

